

<div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
</div>

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th >id</th>
            <th >word</th>
            <th >explain</th>
            <th >1 hour</th>
            <th >1 day</th>
            <th >1 week</th>
            <th >1 month</th>
            <th >1 quarter</th>
            <th >operate</th>
        </tr>
    </thead>
    <tbody>
        <tr v-if="searchList.length == 0">
            <td colspan="10" align="center">

            </td>
        </tr>
        <tr v-for="v in searchList">
            <td>{{ v.id }}</td>
            <td>{{ v.word }}</td>
            <td>{{ v.content }}</td>
            <td>{{ v.hour }}</td>
            <td>{{ v.day }}</td>
            <td>{{ v.week }}</td>
            <td>{{ v.month }}</td>
            <td>{{ v.quarter }}</td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-default" href="javascript:;"><i v-on:click="edit" v-bind:data-id="v.id" class="fa fa-edit"></i></a>
                    <a class="btn btn-default" href="javascript:;"><i v-on:click="del" v-bind:data-id="v.id" v-bind:data-title="v.title" class="fa fa-trash-o"></i></a>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr v-if="searchList.length > 0">
            <td colspan="10">
                <page-component :pageSize="size" :total="count" :p="p" @change="search"></page-component>
            </td>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
    console.log(page);
    global.data.unique_id = '<?= $_unique_id ?? ""?>';
    let type = '<?= $type ?? ""?>';
    let options = [];
    let default_list_type = $.cookie('default_list_type');
    if (type.length) {
        let types = JSON.parse(type);
        for(let i = 0,len = types.length; i < len; i++) {
            if (i === 0 && default_list_type === undefined) default_list_type = types[i]
            options.push({value: types[i]})
        }
    }

    Vue.component('page-component', page)
    let params = {
        el: '#app',
        data: {
            cookie : $.cookie,
            options : options,
            type: default_list_type,
            searching : true,
            count: 0,
            p : 1,
            size : 0,
            counter: 0,
            keyword: '',
            searchList: []
        },
        mounted: function () {
            this.search()
        },
        methods: {
            changeType : function () {
                this.cookie('default_list_type', this.type)
            },
            del : function (event) {
                let id = event.target.getAttribute('data-id');
                let title = event.target.getAttribute('data-title');
                swal({
                    title : "是否删除[" + title + "] ?",
                    icon: "warning",
                }).then(function(){
                    let params = {
                        action : 'delete',
                        id : id,
                    }
                    axios
                        .post('', params , {transformRequest: [function(data) {      //在请求之前对data传参进行格式转换
                                data = Qs.stringify(data)
                                return data
                            }]})
                        .then(function (response) {
                            if (typeof response.data.msg != 'undefined' &&  response.data.msg != '') {
                                throw   response.data.msg
                            }
                            if (typeof response.data.data == 'undefined' || response.data.data == null) {
                                throw   "系统正在维护"
                            }
                            toastr.success('删除成功')
                        })
                        .catch(function (error) { // 请求失败处理
                            toastr.info(error)
                        });
                });
            },
            edit : function (event) {
                let id = event.target.getAttribute('data-id');
                window.open('/English/words_add?id=' + id);
            },
            search : function (obj, p = 1) {
                let that = this;
                let params = {
                    type: this.type,
                    keyword: this.keyword,
                    p: p
                };
                this.p = p;
                this.count = 20;

                post('', params, function (data) {
                    that.searchList = data.data.list
                    that.count = data.data.total
                    that.size = data.data.size
                });
            }
        }
    };

    var app = new Vue($.extend(true, params, global));
</script>